/* backend/static/css/styles.css */

/* 全局样式 */
body {
    padding-top: 70px; /* 确保内容不被固定导航栏遮挡，设置上内边距 */
    background-color: #f8f9fa; /* 设置一个轻微的背景色，以改善视觉效果 */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* 设置全局字体 */
}

/* 导航栏样式 */
.navbar-brand {
    font-size: 1.5rem; /* 导航品牌名称的字体大小 */
    font-weight: bold; /* 设置导航品牌名称为加粗 */
}

.navbar-nav .nav-link {
    font-size: 1rem; /* 导航链接的字体大小 */
    margin-left: 15px; /* 导航链接之间的左外边距 */
}

/* 表单样式 */
.form-label {
    font-weight: 500; /* 表单标签的字体加粗程度 */
}

.form-control::placeholder {
    color: #6c757d; /* 设置表单输入框占位符的颜色 */
    opacity: 1; /* 确保占位符的颜色一致，不透明 */
}

/* 按钮样式 */
/* 主按钮样式 */
.btn-primary {
    background-color: #0d6efd; /* 设置主按钮的背景颜色 */
    border-color: #0d6efd; /* 设置主按钮的边框颜色 */
}
/* 主按钮悬停效果 */
.btn-primary:hover {
    background-color: #0b5ed7; /* 悬停时背景色变为稍暗的蓝色 */
    border-color: #0a58ca; /* 悬停时边框颜色变为稍暗的蓝色 */
}

/* 成功按钮样式 */
.btn-success {
    background-color: #198754; /* 设置成功按钮的背景颜色 */
    border-color: #198754; /* 设置成功按钮的边框颜色 */
}
/* 成功按钮悬停效果 */
.btn-success:hover {
    background-color: #157347; /* 悬停时背景色变为稍暗的绿色 */
    border-color: #146c43; /* 悬停时边框颜色变为稍暗的绿色 */
}

/* 危险按钮样式 */
.btn-danger {
    background-color: #dc3545; /* 设置危险按钮的背景颜色 */
    border-color: #dc3545; /* 设置危险按钮的边框颜色 */
}
/* 危险按钮悬停效果 */
.btn-danger:hover {
    background-color: #bb2d3b; /* 悬停时背景色变为稍暗的红色 */
    border-color: #b02a37; /* 悬停时边框颜色变为稍暗的红色 */
}

/* 警告按钮样式 */
.btn-warning {
    background-color: #ffc107; /* 设置警告按钮的背景颜色 */
    border-color: #ffc107; /* 设置警告按钮的边框颜色 */
}
/* 警告按钮悬停效果 */
.btn-warning:hover {
    background-color: #ffca2c; /* 悬停时背景色变为稍亮的黄色 */
    border-color: #ffbf00; /* 悬停时边框颜色变为稍亮的黄色 */
}

/* 轮廓主按钮样式 */
.btn-outline-primary {
    color: #0d6efd; /* 设置轮廓按钮的字体颜色 */
    border-color: #0d6efd; /* 设置轮廓按钮的边框颜色 */
}
/* 轮廓主按钮悬停效果 */
.btn-outline-primary:hover {
    background-color: #0d6efd; /* 悬停时背景色设置为主按钮颜色 */
    color: #fff; /* 悬停时字体颜色变为白色 */
}

/* 表格样式 */
.table th, .table td {
    vertical-align: middle; /* 表格单元格内容垂直居中 */
}

/* 表格行悬停效果 */
.table-hover tbody tr:hover {
    background-color: #e9ecef; /* 悬停时行的背景颜色变化 */
}

/* 卡片样式 */
.card-header {
    font-size: 1.1rem; /* 卡片标题的字体大小 */
    font-weight: bold; /* 卡片标题加粗 */
}

.card-title {
    font-size: 1rem; /* 卡片内容标题的字体大小 */
}

/* 模态框样式 */
.modal-title {
    font-weight: bold; /* 模态框标题加粗 */
}

/* 警告框自动淡出效果 */
.alert {
    transition: opacity 0.5s ease, visibility 0.5s; /* 设置淡出动画的样式，持续时间和过渡效果 */
}

.alert.fade-out {
    opacity: 0; /* 设置透明度为0，执行淡出 */
    visibility: hidden; /* 设置不可见 */
}

/* 图表容器样式 */
#chartsContainer .card {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 为图表容器添加轻微阴影效果 */
}

#chartsContainer img {
    height: 300px; /* 图表容器内图片的高度 */
    object-fit: contain; /* 确保图片按比例缩放并包含在容器内 */
}

/* 响应式调整 */
@media (max-width: 768px) {
    .navbar-nav .nav-link {
        margin-left: 0; /* 小屏幕下，导航链接的左外边距为0 */
        padding: 0.5rem 1rem; /* 小屏幕下，导航链接的内边距 */
    }

    #chartsContainer img {
        height: 200px; /* 小屏幕下，图表容器内图片的高度调整 */
    }
}
